<template>
	<!-- 地图 -->
	<view class="nav_map">
		<map class="map" id="map" :show-location='true' :longitude="longitude" :latitude="latitude" :scale="16" :markers="covers"
			:circles="circles"></map>


		<view class="location-name u-flex u-row-center">
			<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-location1.png" mode="widthFix">
			</image>
			{{title}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'黄溪镇',
				latitude: '',
				longitude: '',
				covers: [{
					id: 1,
					latitude: '',
					longitude: '',
					iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png',
					width: 32,
					height: 32
				}],
				circles: [{
						latitude: '',
						longitude: '',
						fillColor: '#07C16050',
						radius: 70,
						color: '#07C16000'
					},
					{
						latitude: '',
						longitude: '',
						fillColor: '#07C16020',
						radius: 300,
						color: '#07C16000'
					}
				]
			};
		},
		onReady() {
			
		},
		onLoad(options) {
			console.log(options);
			if (options) {
				this.latitude = options.latitude;
				this.longitude = options.longitude;
				this.covers[0].latitude = options.latitude;
				this.covers[0].longitude = options.longitude;
				this.circles.forEach(el => {
					el.latitude = this.latitude;
					el.longitude = this.longitude
				})
			}
			if(options.title){
				this.title=options.title
			}
		},
		mounted() {

		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.nav_map {
		width: 100vw;
		height: 100vh;

		.map {
			width: 100%;
			height: 100%;
		}

		.location-name {
			position: fixed;
			z-index: 999;
			top: 30rpx;
			left: 30rpx;
			width: 130rpx;
			height: 50rpx;
			background: #07C160;
			border-radius: 25rpx;
			font-size: 24rpx;
			color: #fff;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}
	}
</style>

<style>
	page{
		padding: 0;
	}
</style>